<template>
  <div class="dialoge">
    <div class="panel">
      <div class="margin-up-down">
        <Input prefix="ios-contact" v-model="username" :placeholder="$t('message.usernameInput')"
          @on-blur="closeShow('username')" />
        <div v-show="isShowErrorMsg_username"><span class="onleft">{{ $t('message.verifyUsername') }}</span></div>
      </div>
      <div class="margin-up-down">
        <Input prefix="md-lock" v-model="passwordInput" type="password" password
          :placeholder="$t('message.passwordInput')" @on-blur="closeShow('password')" />
        <span class="onleft" v-show="isShowErrorMsg_password">{{ $t('message.verifyPassword') }}</span>
      </div>
      <div class="margin-up-down">
        <Row>
          <Col span="16"><Input prefix="md-barcode" v-model="recaptcha" :placeholder="$t('message.verificationCodeInput')"
            @on-blur="closeShow('code')" />
          <span class="onleft" v-show="isShowErrorMsg_recaptcha">{{ $t('message.verifyverifition') }}</span>
          </Col>
          <Col span="8"><img :src="imgCodeApi" :alt="$t('message.imageVerificationCode')"
            :title="$t('message.imageVerificationTitle')" @click="changeVerificationCcode">
          </Col>
        </Row>
      </div>
      <Button type="primary" @click="toLogin">{{ $t('button.login') }}</Button>
    </div>
  </div>
</template>

<script>
import { verificationCcodeApi } from 'network/login/login';
export default {
  name: 'Login',
  data() {
    return {
      imgCodeApi: verificationCcodeApi + '?0000',
      // form 
      username: '',
      passwordInput: '',
      recaptcha: '',
      password: '',
      isShowErrorMsg_username: false,
      isShowErrorMsg_password: false,
      isShowErrorMsg_recaptcha: false,

    }
  },
  components: {

  },
  created() {

  },
  methods: {
    closeShow(type) {
      switch (type) {
        case 'username':
          if (this.username.trim() === '')
            this.isShowErrorMsg_username = true;
          else
            this.isShowErrorMsg_username = false;
          break;
        case 'password':
          if (this.passwordInput.trim() === '')
            this.isShowErrorMsg_password = true;
          else
            this.isShowErrorMsg_password = false;
          break;
        case 'code':
          if (this.recaptcha.trim() === '')
            this.isShowErrorMsg_recaptcha = true;
          else
            this.isShowErrorMsg_recaptcha = false;
          break;
        default:
          break;
      }
    },
    changeVerificationCcode() {
      let number = Math.round(Math.random() * 9999);
      let tempApi = this.imgCodeApi.substring(0, this.imgCodeApi.length - 5);
      this.imgCodeApi = tempApi + "?" + number;
    },
    toLogin() {
      this.password = this.passwordInput;
      this.password = "********";
      console.log('点击');
    }
  },
  mounted() {

  },
}
</script>

<style scoped>
.dialoge {
  height: clal(100vh - 62px);
  width: 100vw;
  background-color: #f0f2f5;
}

.panel {
  height: 30vh;
  width: 26vw;
  min-height: 216.48px;
  min-width: 380px;
  position: absolute;
  top: 30vh;
  left: 37vw;
  padding: 5px;
  border: 1px solid #dcdee2;
  border-radius: 6px;
  text-align: center;
  background-color: white;
  box-shadow: 0 24px 50px 0 rgba(0, 0, 0, .12), 0 5px 15px rgba(0, 0, 0, .07);
}

.margin-up-down {
  height: 42px;
  margin: 10px;
  text-align: center;
}

.onleft {
  min-height: 20px;
  display: flex;
  justify-content: left;
  font-size: .8rem;
  color: red;
}
</style>